/* IMAGEN DE PERFIL */
/* .image-container {
    background: none;
    color: #34c23f8c;
    height: 172px;
    width: 173px;

} */




/* .image-container {
    background-color: rgba(var(--color) / 30%);
    padding: 10px;
    margin: -20px;
    margin-bottom: 20px;
    border-radius: 7px;
    z-index: -3;
} */


/* .image-container {
    height: 172px;
    width: 173px;
    background-color: #50ddbf;
    border-radius: 50%;
    box-shadow: 16px 14px 20px #0000008c;
    position: relative;
    overflow: hidden;
    display: inline-block;
    z-index: 3;
    margin-top: 20px;
    animation: animate 3.1s infinite;

} */


.image-container {
    height: 172px;
    width: 173px;
    background-color: #0b1b4791;
    border-radius: 50%;
    box-shadow: 16px 14px 20px #0000008c;
    position: relative;
    overflow: hidden;
    display: inline-block;
    z-index: 3;
    margin-top: 20px;
    animation: animate 3.1s infinite;
}
    
/* IMAGEN DE PERFIL */




/* .image-container {
    background: none;
    color: #34c23f8c;
    height: 172px;
    width: 173px;

} */


/* .image-container {
    background: none;
    color: #34c23f8c;
    height: 172px;
    width: 173px;

   }  *

   


/* 
.image-container {
    background: none;
    color: #34c23f8c;
    height: 172px;
    width: 173px;


} */

/* 
.image-container  {
    color: blanchedalmond;
    height: 172px;
    width: 173px;
 



} */

/* .card .image-container{
    background-size: cover;

    color: #34c23f8c;
    height: 172px;
    width: 173px;
}
 */






/* 

.image-container{
    width: 100px;
    height: 100px;

    background-color: #6f95b4;
    border-radius: 10px;
    margin: 8px 2px 2px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .3s;
    margin-bottom: 6px;
    margin-left: 30px;
    box-shadow: 11px 14px 15px #0000008c;

} */
    
 img{
    height: 168px;
    width: 166px;

    border-radius: 50%;
    box-shadow: 16px 14px 20px #0000008c;
  
    position: relative;
    overflow: hidden;
    display: inline-block;

    z-index: 2;
    margin-top: 2px;

    /* animation: animate 3.1s infinite; */

}

.image-container::before{
    content: "";
    position: absolute;
    height: 190px;
    width: 160px;
    background-image: conic-gradient(rgb(19, 88, 236) 20deg, transparent 120deg);
    animation: rotar 2.5s linear infinite;
  

}

@keyframes rotar{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
    }
}

/* .image-container::after{
    content: "";
    position: absolute;
    height: 160px;
    width: 160px;
    display: inline-block;
    align-items: center;
    
    padding: 10px;
    border-radius: 50%;
    margin-left: -120px;

    box-shadow: inset 16px 14px 20px #0000008c;;

    z-index: -3;
} */




/* 
.image-container img{    
content: "";
height: 164px; 
width: 164px;

border-radius: 50%;
position: relative;
padding: -10px;
align-items: center;
margin-top: -6px;
margin-left: -5px; */







.contenedor.perfil  {
    width: 100px;
    text-align: center;
    top: 500px;
    animation: animate 3.1s infinite;
    

}









.perfil .header .imagen {
    display: inline-block;
    padding: 8px;
    border-radius: 50%;
    background: #333333;
    top: 200px;
    



} 



@media screen and (max-width: 767px) {



    
    .image-container {
        background-color: rgba(var(--color) / 30%);
        padding: -5px;
        margin: -1px;
        display: inline-block;
        align-items: center;

        border-radius: 2px;
        z-index: -2;
    }
    


    .image-container::before{
        content: "";
        position: absolute;
        height: 200px;
        width: 250px;
        margin-left: -10px;
        display: inline-block;
        align-items: center;

 
        /* width: 250px; */
        /* background-image: conic-gradient(rgba(232, 232, 233, 0.123) 20deg, transparent 90deg); */
        animation: rotar  2.6 linear infinite;
        /* animation: rotar 2.6 linear infinite; */

        /* ------------MODFICAR----------- */
      
    
    }
    
    @keyframes rotar{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(-348deg);
        }
    }
    
    /* .image-container::after{
        content: "";
        position: absolute;
        height: 160px;
        width: 160px;
        display: inline-block;
        align-items: center;
        
        padding: 10px;
        border-radius: 50%;
        margin-left: -120px;
    
        box-shadow: inset 16px 14px 20px #0000008c;;
    
        z-index: -3;
    } */
 
    
    /* MODIFICADO */
    
    .image-container img{    
    content: "";
    height: 170px; 
    width: 169px;
    
    border-radius: 50%;
    position: relative;
    align-items: center;
    margin-top: -6px;
    margin-left: -1px;
    position: relative;
    overflow: hidden;
 
    display: inline-block;
     
   
  
  
    
    
    
    
    }  
    
    /* .contenedor.perfil  {
        width: 100px;
        text-align: center;
        top: 50px;
        animation: animate 3.1s infinite;
        
    
    }
     */
    
  
    
    .perfil .header .imagen {
        display: inline-block;
        padding: 8px;
        border-radius: 50%;
        background: #333333;
        top: 20px;
    
    
    
    } 
    
    img{
        height: 168px;
        width: 166px;
    
        border-radius: 50%;
        box-shadow: 16px 14px 20px #0000008c;
      
        position: relative;
        overflow: hidden;
        display: inline-block;
    
        z-index: 2;
        margin-top: 20px;
    
        /* animation: animate 3.1s infinite; */
    
    }

} 



/* ************************************************ */



@media screen and (max-width: 767px) {


.image-container{
    height: 179px;
    width: 173px;
    background-color: #50ddbf;
    border-radius: 50%;
 
    box-shadow: 16px 14px 20px #0000008c;
  
    position: relative;
    overflow: hidden;
    display: inline-block;

    z-index: 3;


    

    animation: animate 3.1s infinite;


}
    
/* IMAGEN DE PERFIL */




.image-container  {
    background: none;
    color: #34c23f8c;
    height: 175px;
    width: 175px;

}


.image-container {
    background: none;
    color: #34c23f8c;
    height: 175px;
    width: 175px;

   } 
.image-container {
    background: none;
    color: #34c23f8c;
    height: 175px;
    width: 175px;
margin-top: -300px; 

  


}
.image-container  {
    color: blanchedalmond;
    height: 172px;
    width: 173px;
    /* margin-top: -590px; */
    /* background-color: rgba(var(--color) / 50%); */
    /* background-color: rgba(var(--color) / 30%); */


    /* box-shadow: 5px 5px 8px #0000003b; */

}

.card .image-container{
    background-size: cover;

    color: #34c23f8c;
    height: 172px;
    width: 173px;
    /* margin-top: -490px; */
}

.card .image-container img{
margin-top: 1px; 
padding: 1px;


}




/* 

.image-container{
    width: 100px;
    height: 100px;

    background-color: #6f95b4;
    border-radius: 10px;
    margin: 8px 2px 2px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .3s;
    margin-bottom: 6px;
    margin-left: 30px;
    box-shadow: 11px 14px 15px #0000008c;

} */
    
 /* img{
    height: 172px;
    width: 173px;
    background-color: #50ddbf;
    border-radius: 50%;
    box-shadow: 16px 14px 20px #0000008c;
  
    position: relative;
    overflow: hidden;
    display: inline-block;

    z-index: 3;
    margin-top: 20px;

    animation: animate 3.1s infinite;

} */

.image-container::before{
    content: "";
    position: absolute;
    height: 190px;
    width: 195px;
    /* width: 161px; */
    /* width: 250px; */
    background-image: conic-gradient(rgba(81, 218, 236, 0.534) 20deg, transparent 120deg);
    /* background-image: conic-gradient(rgba(135, 150, 160, 0.897) 20deg, transparent 120deg); */

    animation: rotar 2.5s linear infinite;
  

}

@keyframes rotar{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
    }
} */







}  

.contenedor.perfil  {
    width: 100px;
    text-align: center;
    top: 50px;
    animation: animate 3.1s infinite;
    

}









.perfil .header .imagen {
    display: inline-block;
    padding: 8px;
    border-radius: 50%;
    /* background: #333333; */
    top: 200px;
    



} 



@media screen and (max-width: 767px) {

/* 
    .image-container{    
        content: "";
        height: 180px; 
        width: 190px;
        
        border-radius: 100%;
        position: relative;
        align-items: center;
        margin-top: -8px;
        margin-left: -10px;

        overflow: hidden;

      
        display: inline-block;
      
      
        padding: 10px;

    }     */

    
    
/* 

    .image-container::before{
        content: "";
        position: absolute;
        height: 100px;
        width: 180px;
        margin-top: 10px;
  
   
    

        /* width: 250px; */
        background-image: conic-gradient(rgba(0, 81, 255, 0.123) 20deg, transparent 90deg);
        animation: rotar  2.6 linear infinite;
        /* animation: rotar 2.6 linear infinite; */

        /* ------------MODFICAR----------- */
      
    
    } */
    
    @keyframes rotar{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(-348deg);
        }
    }
    
    /* .image-container::after{
        content: "";
        position: absolute;
        height: 160px;
        width: 160px;
        display: inline-block;
        align-items: center;
        
        padding: 10px;
        border-radius: 50%;
        margin-left: -120px;
    
        box-shadow: inset 16px 14px 20px #0000008c;;
    
        z-index: -3;
    } */
 
    
    /* MODIFICADO */
    
    /* .image-container img{    
    content: "";
    height: 164px; 
    width: 164px;
    
    border-radius: 50%;
    position: relative;
    align-items: center;
    margin-top: -70px;
    margin-left: -6px;
    position: relative;
    overflow: hidden;
 
    display: inline-block;
     
    */
  
  
    
    
    
    
    }  
    
    /* .contenedor.perfil  {
        width: 100px;
        text-align: center;
        top: 50px;
        animation: animate 3.1s infinite;
        
    
    }
     */
    
    
    
    
    
    
    
    
    .perfil .header .imagen {
        display: inline-block;
        padding: 8px;
        border-radius: 50%;
        background: #333333;
        top: 200px;
    
    
    
    }